<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>QW:Selector</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../apps/assets/base.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="../../core/core.js"></script>
<script type="text/javascript" src="../../dom/selector.js"></script>
<script type="text/javascript" src="selector-files/jquery-1.3.2.js"></script>
<style>
.section-ctn li{margin:0.3em;}
</style>
</head>

<body>

<div id=doc3>
	<h1 class="page-h1">Selector鎬ц兘娴嬭瘯涓庢瘮杈?</h1>
	<div id=hd>
		<!-- keep it -->
	</div>
	<div id="bd" >
		<div class="section-ctn">
			<!--h3 class="section-hd">鐐瑰嚮,浠ヨ繍琛岀浉鍏充唬鐮?/h3-->
			<ul>
				<li>
					杩愯浠ｇ爜:<button onclick="runSelectors();">杩愯浠ヤ笅selector</button>
					----(娓呯┖鏃ф姤鍛?<input type=checkbox id="clearReport" checked />)
<textarea id="selectorText" style="width:800px;height:100px;display:block">
.aaa
input
input.aaa
input.aaa.bbb
input[value="100"]
input[type="button"]
input[readOnly]
.aaa[readOnly]
input:nth-child(2n)
input.aaa:nth-child(2n+1)
div input
div input.aaa
ul input.aaa
>ul
>li
div
>*>li input
>*>div input
</textarea>
				</li>
				<li >
					<div>鐢变簬杩愯鐨勫厛鍚庨棶棰橈紝鎵€浠ワ紝鍦ㄦ晥鐜囦笂瀛樺湪姣旇緝澶х殑涓嶅叕骞筹紝鎶ュ憡涓殑杩愯鏃堕棿锛屼粎浣滃弬鑰?/div>
					<div id="reportWrapOuter"></div>
				</li>
				<li>
					鍔熻兘璇存槑锛?input type=checkbox onclick="G('selector_help').style.display=this.checked?'':'none';"/>
					<ul id="selector_help" style='display:none;'>
						<li>
<pre>
/** 
 * Selector.query(pEl,sSelector): 寰楀埌pEl涓嬬殑绗﹀悎杩囨护鏉′欢鐨凥TML Elements. 
 * selector锛?鐩墠鏀寔鐨勮繍绠楃锛?
	*	鈭?
	E	鈭?
	.class 	鈭?
	#id	鈭?
	E F	鈭?
	E >	鈭?
	E + F	鈭?
	E[attr]	鈭?
	E[attr=val]	鈭?
	E[attr~=val]	鈭?
	E[attr|=val]	鈭?
	:first-child	鈭?
	:link 
	:visited 
	:lang()    
	:before
	::before
	:after
	::after
	:first-letter
	::first-letter
	:first-line
	::first-line
	--------------------------
	涓嬮潰鐨勯€夋嫨鍣ㄥ睘浜嶤SS3 (涓婇潰鐨勫湪浠ュ墠鐨勭増鏈腑)
	E[attr^=val]	鈭?
	E[attr$=val]	鈭?
	E[attr*=val]	鈭?
	E ~ F	鈭?
	:root 
	:last-child	鈭?
	:only-child	鈭?
	:nth-child()	鈭?
	:nth-last-child()	鈭?
	:first-of-type	鈭?
	:last-of-type	鈭?
	:only-of-type	鈭?
	:nth-of-type()	鈭?
	:nth-last-of-type()	鈭?
	:empty	鈭?
	:not()	鈭?
	:target 
	:enabled	鈭?
	:disabled	鈭?
	:checked	鈭?
	--------------------------
	鍏跺畠
	:parent	鈭?
	--------------------------
	绀轰緥锛?
	"ul li" 
	">ul li"
	"ul li:first-child"
	"li:nth-child(2n)"----nth鏀寔鍙傛暟濡傦細'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'
 * @param {HTMLElement} pEl: 瀹瑰櫒瀵硅薄 
 * @returns {array} : 杩斿洖elements鏁扮粍銆?
 */

 </pre>

						</li>
						<li>
						</li>

					</ul>


				</li>
			</ul>
		</div>
<hr/>
<div>灏嗕互涓嬫閲岀殑鍐呭锛屽鍒?input id="htmlTimes" value="200">浠斤紝<input type=button value="浣滀负椤甸潰鍐呭锛岃繘琛屾祴璇? onclick="changeHtml()">
<textarea id="html4Test" style="width:800px;height:300px;display:block" >
<ul>
 <li id="testCtn1">
  <div>
   <div class="ctn1">
    <div>
	 <input class="aaa bbb" value="class:aaa bbb"/>
	 <input readOnly=true value="readonly:true"/>
	 <input type=button value="test"/>
	</div>
	<div>
     <input value="100" >-
	 -<span style="border:solid #ccc 1px;">span</span><input readOnly=true value="readonly:true,class:aaa" class="aaa">
	 -<input type=button value="test" class="button"/>
	</div>
   </div>
  </div>
 </li>
</ul>
</textarea>
</div>
<div style="text-align:left;height:200px;overflow:auto;border:solid 1px black;" id="testDivWrapOuter">
</div>
	</div>
	<div id="ft">
		QW
	</div>
</div>




<script>
function G(id){
	return document.getElementById(id);
}
var encode4Html=QW.StringH.encode4Html;

function changeHtml(){
	G('testDivWrapOuter').innerHTML=new Array(G('htmlTimes').value*1+1).join(
		G('html4Test').value
	);
}
changeHtml();

function runSelectors(){
	var selectors={
		'绯荤粺鑷甫':function(pEl,sSelector){
			return pEl.querySelectorAll(sSelector);
		},
		'QW.Selector':function(pEl,sSelector){
			return QW.Selector.query(pEl,sSelector);
		},
		'jquery1.3.2':function(pEl,sSelector){
			return window.jQuery(sSelector,pEl);
		}
	};

	var sSelectors=G('selectorText').value.split('\n');
	if(G('clearReport').checked){
		G('reportWrapOuter').innerHTML='';
	}
	if(!G('selectorsReport')){
		var html=['<table border=1 cellPadding=0 cellSpacing=0 id="selectorsReport"><thead><th>.</th>'];
		for(var i in selectors){
			html.push('<th>'+i+'</th>');
		}
		html.push('</thead></table>');
		G('reportWrapOuter').innerHTML=html.join('');
	}
	var reportTable=G('selectorsReport');
	var testWrapOuter=G('testDivWrapOuter');
	var html=['<table><tbody>'];
	for(var i =0;i<sSelectors.length;i++){
		var s=sSelectors[i].replace(/^\s+|\s+$/g,'');
		if(!s) continue;
		html.push('<tr><td>'+encode4Html(s)+'</td>');
		for(var j in selectors){
			try{
				var d0=new Date();
				var els=selectors[j](testWrapOuter,s);
				var d1=new Date();
				html.push('<td><ul style="white-space:nowrap;"><li>鏃堕棿:'+(d1-d0)+'</li><li>缁撴灉鏁?'+els.length+'</li><li>缁撴灉鏄惁姝ｇ‘:<input type=checkbox></li></ul></td>');
			}
			catch(ex){
				html.push('<td class="error">'+encode4Html(ex+'')+'</td>');
			}
		}
		html.push('</tr>');
	}
	html.push('</tbody></table>');
	var div=document.createElement('div');
	div.innerHTML=html.join('');
	reportTable.appendChild(div.firstChild.firstChild);
}
</script>

</body>
</html>
